{layout name="layout/header" /}
<link href="root/css/plugins/footable/footable.core.css" rel="stylesheet">

<link href="root/css/plugins/switchery/switchery.css" rel="stylesheet">
<script src="root/js/plugins/switchery/switchery.js"></script>
<!--<link href="root/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">-->

<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>{$title}</h5>
                </div>
                <div class="ibox-content">
                    <p>
                        <a type="button" class="btn btn-success btn-outline" data-toggle="modal" href="#modal-form">添加</a>
                        <button type="button" class="btn btn-primary btn-outline refresh">刷新</button>
                    </p>
                </div>
                <div class="ibox-content">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>排序</th>
                                <th>名称</th>
                                <!--<th>关键词</th>-->
                                <!--<th>状态</th>-->
                                <th>创建时间</th>
                                <th>更新时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        {volist name="data" id="vo"}
                            <tr pid="{$vo.id}">
                                <td><input type="text" class="form-control update_text" data-field="sort" value="{$vo.sort}"></td>
                                <td><input type="text" class="form-control update_text" data-field="name" value="{$vo.name}"></td>
                                <!--<td>-->
                                    <!--<input type="checkbox" class="js-switch update_checkbox" data-field="display" {eq name="$vo.display" value="1"}checked{/eq} />-->
                                <!--</td>-->
                                <td>{$vo.addtime|date="Y-m-d H:i",###}</td>
                                <td>{$vo.modtime|date="Y-m-d H:i",###}</td>
                                <td >
                                    <button type="button" class="btn btn-danger btn-sm product_del" >删除</button>
                                </td>
                            </tr>
                        {/volist}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>
<!--新添弹窗-->
<div id="modal-form" class="modal fade" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12 b-r">
                        <h3 class="m-t-none m-b">新增</h3>
                        <form id="form">
                            <div class="form-group">
                                <label>名称</label>
                                <input type="text" placeholder="名称" id="name" name="name" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>排序</label>
                                <input type="text" placeholder="排序" id="sort" name="sort" class="form-control">
                            </div>
                            <!--<div class="form-group">-->
                                <!--<label >前台显示</label>-->
                                <!--<select class="form-control m-b" id="display" name="display">-->
                                    <!--<option value="1">显示</option>-->
                                    <!--<option value="0">隐藏</option>-->
                                <!--</select>-->
                            <!--</div>-->
                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <button class="btn btn-primary" id="sub" data-dismiss="modal">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--新添结束-->

<!--layer-->
<script src="root/js/plugins/layer/layer.min.js"></script>

<script>
    $(document).ready(function() {
        var elem = document.querySelectorAll('.js-switch');
        elem.forEach(function(i,index){
            var a= "a" +index;
            a = new Switchery(i, {
                color: '#1AB394'
            });
        });
        //新添扩展字段
        $('#sub').click(function () {
            var name = $('#name').val().trim();
            if(name == '' ){
                layer.msg('名称不能为空!');
                return false;
            }

            var sort = $("#sort").val().trim();
            // var display = $('#display').val();

            $.ajax({
                url:"{:url('ajax_add_attr')}",
                type:"post",
                data:{name:name,sort:sort},
                dataType:"json",
                success:function (data) {
                    if(data.code == 1){
                        layer.msg(data.msg);
                        setTimeout(function(){
                            window.location.reload();
                        },1500);
                        return false;
                    }else {
                        layer.msg(data.msg);
                        return false;
                    }
                }
            });
        });

        //列表页修改
        $(".update_text").blur(function () {
            var field = $(this).attr('data-field');
            var id = $(this).parent().parent().attr('pid');
            var value = $(this).val().trim();
            update(id,field,value);
        });
        $(".update_checkbox").change(function () {
            var field = $(this).attr('data-field');
            var value = $(this).is(':checked')?1:0;
            var id = $(this).parent().parent().attr('pid');
            update(id,field,value);
        });
        function update(id,field,value) {
            $.ajax({
                url:"{:url('ajax_update_attr')}",
                type:'post',
                dataType:'json',
                data:{field:field,value:value,id:id},
                success:function (data) {
                    console.log(data.msg);
                    if(data.code != 1){
                        layer.msg(data.msg);
                    }
                }
            })
        }

        //产品删除
        $('.product_del').click(function(){
            var id = $(this).parent().parent().attr('pid');
            var $this = $(this);

            layer.confirm('确定删掉吗?', {
                btn: ['确定','取消'] //按钮
            }, function(){
                $.ajax({
                    url:"{:url('ajax_del_attr')}",
                    type:'post',
                    data:{id:id},
                    dataType:'json',
                    success:function (data) {
                        if(data.code==1){
                            layer.msg(data.msg);
                            $this.parent().parent().remove();
                        }else {
                            layer.msg(data.msg);
                        }
                    }
                })
            }, function(){

            });

        });
    });

</script>
